<template>
  <layout
    tabbar="none"
    navbar="normal"
    :showBack="true"
    navTitle="发布动态"
    navbarBackgroundColor="#020303"
    class="dark-theme"
  >
    <view class="post-create-container" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 文本输入区域 -->
      <view class="input-section">
        <textarea
          class="content-input"
          placeholder="分享你的动态..."
          v-model="postContent"
          maxlength="500"
          :adjust-position="false"
          :show-confirm-bar="false"
          @input="updateContentCount"
        ></textarea>

        <!-- 字数计数 -->
        <view class="content-counter" :class="{'near-limit': contentCount > 400, 'at-limit': contentCount > 480}">
          {{ contentCount }}/500
        </view>
      </view>

      <!-- 图片预览区域 -->
      <view class="image-preview-section" v-if="images.length > 0 || showUploadButton">
        <view class="image-preview-title" v-if="images.length > 0">
          <text class="title-text">照片</text>
          <text class="drag-hint">
            <text class="tn-icon-move"></text>
            可拖动调整顺序
          </text>
        </view>
        <view class="image-preview-grid" :class="{'dragging': isDragging}">
          <!-- 已上传图片预览 -->
          <view
            class="image-preview-item"
            v-for="(image, index) in images"
            :key="index"
            :class="{'is-dragging': dragIndex === index}"
            :data-index="index"
            @touchstart="touchStart($event, index)"
            @touchmove.stop.prevent="touchMove($event)"
            @touchend="touchEnd"
            @touchcancel="touchEnd"
          >
            <image
              :src="image.url || image"
              class="image-preview"
              mode="aspectFill"
              @tap="previewImage(index)"
            ></image>
            <view class="remove-image" @tap.stop="removeImage(index)">
              <text class="tn-icon-close"></text>
            </view>
            <!-- 拖动图标指示器 -->
            <view class="drag-indicator">
              <text class="tn-icon-move"></text>
            </view>
            <!-- 上传进度条 -->
            <view class="upload-progress-container" v-if="image.progress && image.progress < 100">
              <view class="upload-progress-bar" :style="{width: image.progress + '%'}"></view>
            </view>
          </view>

          <!-- 上传图片按钮 -->
          <view class="image-upload" v-if="showUploadButton" @tap="chooseImage">
            <view class="upload-icon">
              <text class="tn-icon-camera-fill"></text>
              <text class="upload-text">添加图片</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 话题选择区域 -->
      <view class="topics-section">
        <view class="section-title">
          <text class="tn-icon-bookmark"></text>
          <text>添加话题</text>

          <!-- 话题高级功能开关 -->
          <!-- <view class="topic-advanced-toggle">
            <text class="toggle-label">高级话题功能</text>
            <tn-switch-neu
              :value="enableTopicSearchAndCreate"
              @input="saveTopicSearchConfig"
              activeColor="#B3F73C"
              inactiveColor="rgba(0, 0, 0, 0.3)"
              :size="45"
              shape="circle"
              class="custom-switch"
            ></tn-switch-neu>
          </view> -->
        </view>

        <!-- 话题搜索 - 仅在启用配置时显示 -->
        <view class="topic-search-wrapper" v-if="enableTopicSearchAndCreate">
          <tn-input
            v-model="topicSearchQuery"
            placeholder="搜索话题..."
            type="text"
            clearable
            showRightIcon
            rightIcon="search"
            class="topic-search-input"
            :customStyle="{
              backgroundColor: 'rgba(0, 0, 0, 0.2)',
              color: '#f0f0f0',
              borderRadius: '30rpx',
              padding: '0 20rpx',
              height: '70rpx'
            }"
            @input="debounceSearch"
            @confirm="searchTopic(topicSearchQuery)"
          ></tn-input>
        </view>

        <!-- 已选择的话题 -->
        <view class="selected-topics" v-if="selectedTopics.length > 0">
          <view
            class="topic-chip selected"
            v-for="(topic, index) in selectedTopics"
            :key="index"
            @tap="removeTopic(index)"
          >
            #{{ topic.name }}
            <text class="tn-icon-close"></text>
          </view>
        </view>

        <!-- 话题滚动区域 -->
        <view class="topics-scroll-wrapper" :class="{'topics-scroll-wrapper--simple': !enableTopicSearchAndCreate}">
          <!-- 创建话题按钮 - 仅在启用配置时显示 -->
          <view class="create-topic-btn" @tap="openCreateTopicPopup" v-if="enableTopicSearchAndCreate">
            <text class="tn-icon-add"></text>
            <text>创建话题</text>
          </view>

          <!-- 热门话题 -->
          <scroll-view class="scrollable-topics" scroll-x="true" show-scrollbar="false" :class="{'scrollable-topics--simple': !enableTopicSearchAndCreate}">
            <!-- 已移除热门话题提示 -->

            <view
              class="topic-chip"
              v-for="(topic, index) in filteredTopics"
              :key="index"
              @tap="addTopic(topic)"
              :class="{'topic-chip--simple': !enableTopicSearchAndCreate}"
            >
              #{{ topic.name }}
              <view class="topic-hot" v-if="topic.hot > 0">{{ formatHot(topic.hot) }}</view>
            </view>

            <!-- 话题结束提示 -->
            <view class="topic-end-hint" v-if="filteredTopics.length === 0" :class="{'topic-end-hint--simple': !enableTopicSearchAndCreate}">
              <text>没有更多话题</text>
              <text @tap="fetchTopics" class="refresh-link">刷新</text>
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- 位置信息区域 -->
      <view class="location-section" :class="{'active': showLocation}">
        <view class="section-header">
          <view class="section-title">
            <text class="tn-icon-location"></text>
            <text>位置信息</text>
            <text class="switch-status" v-if="showLocation">已开启</text>
          </view>

          <!-- 自定义开关 -->
          <view class="custom-toggle" @tap="toggleSwitch">
            <view class="toggle-track" :class="{'active': showLocation}">
              <view class="toggle-thumb" :class="{'active': showLocation}"></view>
            </view>
          </view>
        </view>

        <!-- 位置选项列表 -->
        <view class="location-options" v-if="showLocation">
          <!-- 位置搜索
          <view class="location-search">
            <view class="search-wrapper" :class="{'search-wrapper--focused': inputFocused}">
              <tn-input
                v-model="locationSearchQuery"
                placeholder="搜索位置..."
                type="text"
                clearable
                showRightIcon
                rightIcon="search"
                class="location-search-input"
                @input="searchLocation"
                @focus="onLocationInputFocus"
                @blur="onLocationInputBlur"
                :border="false"
                :customStyle="{
                  backgroundColor: 'transparent',
                  color: '#f0f0f0'
                }"
                rightIconColor="#B3F73C"
                placeholderColor="#999999"
                fontSize="28rpx"
                height="70rpx"
                width="100%"
              ></tn-input>
              <view class="search-indicator-container" v-if="inputFocused">
                <view class="search-indicator"></view>
              </view>
            </view>
          </view>
          -->

          <!-- 加载中状态 -->
          <view class="location-loading" v-if="gettingLocation">
            <tn-loading></tn-loading>
            <text class="loading-text">正在获取位置...</text>
          </view>

          <!-- 位置列表 -->
          <view class="location-list" v-else-if="filteredLocations.length > 0">
            <view
              class="location-item"
              v-for="(location, index) in filteredLocations"
              :key="index"
              :class="{'active': selectedLocationIndex === index}"
              :style="{animationDelay: (index * 0.05) + 's'}"
              :data-is-city="location.isCity"
              @tap="selectLocation(location, index)"
            >
              <view class="location-icon">
                <text v-if="location.isCity" class="tn-icon-world"></text>
                <text v-else-if="location.isCurrent" class="tn-icon-location"></text>
                <text v-else class="tn-icon-location"></text>
              </view>
              <view class="location-info">
                <view class="location-name">{{ location.name }}</view>
                <view class="location-address">{{ location.address }}</view>
              </view>
              <view class="location-distance" v-if="location.distance">
                {{ location.distance }}
              </view>
            </view>
          </view>

          <!-- 位置获取错误状态 -->
          <view class="location-error" v-else-if="locationError">
            <view class="error-icon">
              <text class="tn-icon-info"></text>
            </view>
            <view class="error-message">{{ locationErrorMessage }}</view>
            <view class="error-action">
              <view class="retry-btn" @tap="retryGetLocation">
                <text class="tn-icon-refresh"></text>
                <text>重新获取位置</text>
              </view>
              <view class="skip-btn" @tap="skipLocation">
                <text>跳过位置信息</text>
              </view>
            </view>
          </view>

          <!-- 无结果提示 -->
          <view class="no-location-results" v-else-if="locationSearchQuery && !gettingLocation">
            <tn-empty
              icon="info"
              mode="message"
              tipText="未找到位置"
              tipColor="#f0f0f0"
              iconColor="#B3F73C"
            >
              <text class="no-results-desc">尝试其他搜索词或重新搜索</text>
            </tn-empty>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作区域 -->
    <view class="bottom-action-bar">
      <view
        class="custom-publish-button"
        :class="{'disabled': !canPublish || isSubmitting}"
        @tap="publishPost"
      >
        <view class="button-content" v-if="!isSubmitting">
          <text>发布</text>
          <text class="remain-count" v-if="remainPublishCount > 0">(剩余: {{remainPublishCount}}次)</text>
        </view>
        <view class="button-loading" v-else>
          <view class="loading-circle"></view>
          <text>发布中...</text>
        </view>
        <view class="button-shine"></view>
      </view>
    </view>

    <!-- 创建话题弹窗 -->
    <tn-popup
      mode="center"
	  v-model="showCreateTopicPopup"
      @close="closeCreateTopicPopup"
      backgroundColor="#020303"
    >
      <view class="create-topic-popup">
        <view class="popup-header">
          <text class="popup-title">创建新话题</text>
        </view>
        <view class="popup-content">
          <view class="input-field">
            <text class="input-label">话题名称</text>
            <view class="input-wrapper" :class="{'input-wrapper--focused': topicInputFocused}">
              <tn-input
                v-model="newTopicName"
                placeholder="输入话题名称(不含#)"
                type="text"
                clearable
                :border="false"
                borderColor="rgba(179, 247, 60, 0.2)"
                maxLength="20"
                class="topic-input"
                :customStyle="{
                  backgroundColor: '#070707',
                  color: '#f0f0f0',
                  fontSize: '28rpx',
                  borderRadius: '16rpx',
                  padding: '0 20rpx',
                  height: '70rpx',
                  lineHeight: '70rpx'
                }"
                @confirm="createNewTopic"
                @focus="onTopicInputFocus"
                @blur="onTopicInputBlur"
              />
              <text class="input-counter" :class="{'near-limit': newTopicName.length > 12, 'at-limit': newTopicName.length > 16}">
                {{ newTopicName.length }}/20
              </text>
            </view>
            <text class="input-tip">创建一个好的话题，有助于你的内容被更多相关兴趣的人发现</text>
          </view>
        </view>
        <view class="popup-footer">
          <tn-button
            backgroundColor="transparent"
            fontColor="#999999"
            width="240rpx"
            height="70rpx"
            @click="closeCreateTopicPopup"
          >
            取消
          </tn-button>
          <tn-button
            backgroundColor="#B3F73C"
            fontColor="#020303"
            width="240rpx"
            height="70rpx"
            :disabled="!newTopicName.trim()"
            @click="createNewTopic"
          >
            创建
          </tn-button>
        </view>
      </view>
    </tn-popup>

    <!-- 发布中弹窗 -->
    <tn-popup
      mode="center"
      v-model="publishing"
      hideHeader
      hideClose
      backgroundColor="rgba(0,0,0,0.7)"
    >
      <view class="publishing-popup">
        <tn-loading size="lg" color="#B3F73C"></tn-loading>
        <text class="publishing-text">{{ publishingMessage }}</text>
        <text class="publishing-subtext">请稍候...</text>
      </view>
    </tn-popup>

	<!-- 添加VIP弹窗组件 -->
	<vip-popup
	  :show.sync="isVipModalVisible"
	  :userInfo="userInfo"
	  @purchase-success="onVipPurchaseSuccess"
	></vip-popup>

    <!-- 添加订阅消息组件 -->
    <PostSubscribe
      :show.sync="showSubscribe"
      :post-content="postContent"
      @success="onSubscribeComplete"
    />

    <!-- 添加解锁弹窗组件 -->
    <unlock-message-modal
      v-if="showUnlockPostModal"
      :visible="showUnlockPostModal"
      :scene-id="'postCreate'"
      @close="showUnlockPostModal = false"
      @show-vip="isVipModalVisible = true"
      @unlock-success="onPostUnlockSuccess"
    ></unlock-message-modal>
  </layout>
</template>

<script>
import { mapState } from 'vuex'
import { createPost } from '@/api/feed/index.js'
import { uploadFile } from '@/api/upload/index.js'
import { getTopicList, getTopicCategoryList } from '@/api/feed/index.js'
import VipPopup from '@/components/vip/vip-popup.vue';
import PostSubscribe from '@/components/subscribe/post/index.vue';
import SubscribeManager, { STORAGE_KEYS } from '@/utils/subscribe-manager.js';
// 导入地图工具函数
import { geocoder, searchLocation as mapSearchLocation, calculateDistance, formatDistance } from '@/utils/mapUtils.js';
import UnlockMessageModal from '@/components/message/UnlockMessageModal.vue';

export default {
  name: 'PostCreate',
  components: {
  	VipPopup,
    PostSubscribe,
    UnlockMessageModal
  },
  data() {
    return {
      // 动态内容
      postContent: '',
      contentCount: 0,
      images: [],
      selectedTopics: [], // 保存选中的话题对象
      topicsFromBackend: [], // 保存从后端获取的话题列表，包含id和name

      // 话题搜索和创建话题功能开关配置
      // 设置为true时启用话题搜索和创建话题功能，设置为false时禁用这些功能
      // 可以通过系统配置或用户偏好设置来控制此选项
      enableTopicSearchAndCreate: false, // 默认关闭话题搜索和创建功能

      // 位置相关
      showLocation: false,
      gettingLocation: false,
      locationSearchQuery: '',
      selectedLocation: null,
      selectedLocationIndex: -1,
      nearbyLocations: [],
      filteredLocations: [],
      currentLocation: null,
      locationError: false,
      locationErrorMessage: '',

      // 弹窗控制
      showCreateTopicPopup: false,
      publishing: false,

      // 新话题
      newTopicName: '',
      topicInputFocused: false,

      // 发布状态
      publishingMessage: '正在发布...',
      isSubmitting: false, // 新增：发布按钮loading状态

      // 输入框聚焦状态
      inputFocused: false,

      // 拖拽相关
      isDragging: false,      // 是否正在拖拽
      dragIndex: -1,          // 当前拖拽的图片索引
      startPageX: 0,          // 拖拽开始X坐标
      startPageY: 0,          // 拖拽开始Y坐标
      currentX: 0,            // 当前X坐标
      currentY: 0,            // 当前Y坐标
      itemWidth: 0,           // 图片项宽度
      itemHeight: 0,          // 图片项高度
      itemPositions: [],       // 所有图片项的位置信息

      // 话题搜索
      topicSearchQuery: '',
      topicSearchTimer: null,

      // 添加图片上传状态跟踪
      imageUploadQueue: 0,
      hasUploadingImages: false,
	  // 添加VIP弹窗控制变量
	  isVipModalVisible: false,
      showSubscribe: false,

      // 添加解锁弹窗控制变量
      showUnlockPostModal: false,
    }
  },
  computed: {
    ...mapState({
      vuex_status_bar_height: state => state.vuex_status_bar_height,
      vuex_custom_bar_height: state => state.vuex_custom_bar_height
    }),

    // 剩余发布次数计算属性
    remainPublishCount() {
      // 从用户信息中获取剩余发布次数，如果不存在则默认为0
      return this.userInfo ? (this.userInfo.remainPublishFeedCount || 0) : 0;
    },

    // 是否显示上传按钮
    showUploadButton() {
      return this.images.length < 9; // 最多上传9张图片
    },

    // 是否可以发布
    canPublish() {
      // 必须有文本内容，且没有正在上传的图片时可以发布
      return this.postContent.trim() !== '' && !this.hasUploadingImages;
    },

    // 过滤话题 - 仅使用后端获取的话题
    filteredTopics() {
      // 只使用后端获取的话题，过滤掉已选择的话题
      const selectedTopicNames = this.selectedTopics.map(topic => topic.name);

      return this.topicsFromBackend
        .filter(topic => !selectedTopicNames.includes(topic.name))
        .map(topic => ({
          id: topic.id,
          name: topic.name,
          isFromBackend: true,
          hot: topic.hot || 0
        }));
    },

	// 添加userInfo计算属性，用于传递给VIP弹窗组件
	userInfo() {
	  const userState = this.$store.state.user || {};
	  const userInfo = userState.userInfo || {};
	  return {
	    isVip: userInfo.vip === true,
	    // 传递原始用户信息和必要的附加属性
	    ...userInfo
	  };
	},
  },
  onLoad() {
    // 页面加载时初始化数据
    this.fetchTopics(); // 获取话题列表

    // 初始化话题搜索和创建功能开关状态
    //this.initTopicSearchConfig();
  },
  // 添加onShow生命周期函数
  onShow() {
    // #ifdef MP-WEIXIN
    // 使用SubscribeManager检查从设置页面返回状态
    SubscribeManager.checkFromSettingReturn(
      // 成功回调 - 用户已授权并接受订阅
      (result) => {
        // 订阅成功，返回首页
        this.publishing = false;
        this.isSubmitting = false;
        uni.navigateBack();
      },
      // 失败回调 - 用户未授权或拒绝订阅
      () => {
        // 如果仍未订阅，继续提示
        this.continueSubscribeGuide();
      },
      // 传递必要的参数
      'POST_ALL',
      STORAGE_KEYS.POST.SUBSCRIBED,
      STORAGE_KEYS.POST.SUBSCRIBE_TIME,
      STORAGE_KEYS.POST.LAST_PROMPT
    );
    // #endif
  },
  methods: {
    /**
     * 获取placeholder图片地址
     * @param {Number} width 图片宽度
     * @param {Number} height 图片高度
     * @param {String} id 图片ID（可选）
     * @returns {String} 图片URL
     */
    getPlaceholderImage(width = 400, height = 400, id = null) {
      // 如果提供id，则使用固定图片
      if (id) {
        return `https://picsum.photos/seed/${id}/${width}/${height}`;
      }

      // 否则生成随机id
      const randomId = Math.floor(Math.random() * 1000);
      return `https://picsum.photos/seed/img${randomId}/${width}/${height}`;
    },

    // 更新内容计数
    updateContentCount(e) {
      this.contentCount = e.detail.value.length;
    },

    // 选择图片
    chooseImage() {
      if (this.images.length >= 9) {
        this.showToast('最多上传9张图片');
        return;
      }

      uni.chooseImage({
        count: 9 - this.images.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 处理返回的临时文件路径
          const tempFilePaths = res.tempFilePaths;
          const tempFiles = res.tempFiles;

          // 依次上传图片
          tempFilePaths.forEach((path, index) => {
            // 创建一个带有进度属性的图片对象
            const newImage = {
              url: path, // 临时路径作为临时预览
              progress: 0,
              width: 0,
              height: 0,
              size: tempFiles[index] ? tempFiles[index].size : 0
            };

            // 添加到图片列表
            this.images.push(newImage);

            // 获取图片信息
            uni.getImageInfo({
              src: path,
              success: (imageInfo) => {
                newImage.width = imageInfo.width;
                newImage.height = imageInfo.height;
              }
            });

            // 上传图片
            this.uploadImage(path, newImage);
          });
        }
      });
    },

    // 上传图片到服务器
    uploadImage(filePath, imageObj) {
      // 增加上传队列计数
      this.imageUploadQueue++;
      // 设置上传状态
      this.hasUploadingImages = true;

      uploadFile({
        filePath,
        fileType: 'feed', // 动态相关的图片
        onProgress: (progress) => {
          // 更新上传进度
          imageObj.progress = progress;
        }
      }).then(result => {
        // 上传成功后，更新URL为服务器返回的URL
        imageObj.url = result;
        imageObj.progress = 100;
      }).catch(err => {
        // 上传失败处理
        uni.showToast({
          title: '图片上传失败，请重试',
          icon: 'none'
        });

        // 从列表中移除该图片
        const index = this.images.findIndex(img => img === imageObj);
        if (index !== -1) {
          this.images.splice(index, 1);
        }

        console.error('上传图片失败', err);
      }).finally(() => {
        // 减少上传队列计数
        this.imageUploadQueue--;
        // 如果队列为空，设置上传完成状态
        if (this.imageUploadQueue <= 0) {
          this.hasUploadingImages = false;
          this.imageUploadQueue = 0;
        }
      });
    },

    // 移除图片
    removeImage(index) {
      this.images.splice(index, 1);
    },

    // 预览图片
    previewImage(index) {
      const urls = this.images.map(img => img.url || img);
      uni.previewImage({
        urls: urls,
        current: urls[index]
      });
    },

    // 添加话题 - 修改为处理话题对象
    addTopic(topic) {
      const selectedTopicNames = this.selectedTopics.map(t => t.name);

      if (!selectedTopicNames.includes(topic.name) && this.selectedTopics.length < 3) {
        this.selectedTopics.push(topic);
      } else if (this.selectedTopics.length >= 3) {
        this.showToast('最多选择3个话题');
      }
    },

    // 移除话题
    removeTopic(index) {
      this.selectedTopics.splice(index, 1);
    },

    // 打开创建话题弹窗
    openCreateTopicPopup() {
      this.showCreateTopicPopup = true;
    },

    // 关闭创建话题弹窗
    closeCreateTopicPopup() {
      this.showCreateTopicPopup = false;
      this.newTopicName = '';
    },

    // 创建新话题 - 修改为只处理新增话题对象
    createNewTopic() {
      if (this.newTopicName.trim()) {
        const topicName = this.newTopicName.trim();

        // 检查是否已存在于已选话题中
        const selectedTopicNames = this.selectedTopics.map(t => t.name);
        if (selectedTopicNames.includes(topicName)) {
          this.showToast('该话题已添加');
          this.closeCreateTopicPopup();
          return;
        }

        // 检查是否存在于后端话题列表中
        const existingTopic = this.topicsFromBackend.find(t => t.name === topicName);

        if (existingTopic) {
          // 如果是已有话题，使用后端ID
          this.addTopic({
            id: existingTopic.id,
            name: topicName,
            isFromBackend: true
          });
        } else {
          // 如果是新话题，添加为自定义话题
          this.addTopic({
            name: topicName,
            isFromBackend: false
          });
        }

        this.showToast('创建话题成功');
        this.closeCreateTopicPopup();
      }
    },

    // 切换位置信息显示
    toggleLocation() {
      if (this.showLocation && this.nearbyLocations.length === 0) {
        this.getLocation();
      }
    },

    // 获取位置
    getLocation() {
      this.gettingLocation = true;
      this.locationError = false; // 重置错误状态

      // 使用uni-app的getLocation API获取真实位置
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          const { longitude, latitude } = res;

          // 保存当前位置坐标用于后续操作
          this.currentLocation = {
            longitude,
            latitude
          };

          // 使用uni.chooseLocation获取附近地点
          this.getNearbyLocations(longitude, latitude);
        },
        fail: (err) => {
          console.error('获取位置失败', err);
          this.gettingLocation = false;

          // 设置错误状态和错误信息
          this.locationError = true;
          this.locationErrorMessage = '无法获取您的位置信息，请检查是否已开启定位权限';
        }
      });
    },

    // 添加重试获取位置方法
    retryGetLocation() {
      this.requestLocationPermission();
    },

    // 添加跳过位置方法
    skipLocation() {
      this.locationError = false;
      this.locationErrorMessage = '';
      this.nearbyLocations = [];
      this.filteredLocations = [];
    },

	// VIP购买成功回调
	onVipPurchaseSuccess(purchaseInfo) {
	  console.log('VIP购买成功', purchaseInfo);
	},

    // 修改请求位置权限方法
    requestLocationPermission() {
      this.gettingLocation = true;
      this.locationError = false;

      uni.authorize({
        scope: 'scope.userLocation',
        success: () => {
          // 授权成功，重新获取位置
          this.getLocation();
        },
        fail: () => {
          this.gettingLocation = false;
          this.locationError = true;
          this.locationErrorMessage = '请授予应用获取位置信息的权限';

          // 引导用户开启位置权限
          uni.showModal({
            title: '定位权限',
            content: '请授予应用获取位置信息的权限，以便使用位置功能',
            confirmText: '去设置',
            success: (res) => {
              if (res.confirm) {
                // 打开设置页面
                uni.openSetting();
              }
            }
          });
        }
      });
    },

    // 修改获取附近地点方法
    getNearbyLocations(longitude, latitude) {
      // 设置加载状态
      this.gettingLocation = true;
      this.locationError = false;

      // 使用地图工具函数获取位置信息
      geocoder(latitude, longitude, { getPoi: true, poiOptions: 'radius=1000;page_size=3;policy=1' })
        .then(result => {
          this.nearbyLocations = [];

          // 添加当前城市作为第一个选项
          if (result.address_component && result.address_component.city) {
            this.nearbyLocations.push({
              name: `${result.address_component.city}`,
              address: `${result.address_component.province}`,
              distance: '当前城市',
              location: {
                lat: latitude,
                lng: longitude
              },
              isCity: true // 标记为城市
            });
          }

          // 添加当前位置作为第二个选项
          this.nearbyLocations.push({
            name: result.formatted_addresses?.recommend || result.address,
            address: result.address_component ?
              `${result.address_component.province}${result.address_component.city}${result.address_component.district}` :
              '当前位置',
            distance: '当前位置',
            location: {
              lat: latitude,
              lng: longitude
            },
            isCurrent: true // 标记为当前位置
          });

          // 添加附近的POI作为额外选项（最多3个）
          if (result.pois && result.pois.length > 0) {
            result.pois.slice(0, 3).forEach(poi => {
              // 计算大致距离
              const distance = calculateDistance(latitude, longitude,
                poi.location.lat, poi.location.lng);

              this.nearbyLocations.push({
                name: poi.title,
                address: poi.address || '附近地点',
                distance: formatDistance(distance),
                location: poi.location
              });
            });
          }

          // 更新过滤后的位置列表
          this.filteredLocations = [...this.nearbyLocations];
        })
        .catch(error => {
          // 如果API调用失败，设置错误状态
          console.error('获取位置信息失败:', error);
          this.locationError = true;
          this.locationErrorMessage = '获取位置信息失败，请稍后重试';

          // 不再使用默认位置
          this.nearbyLocations = [];
          this.filteredLocations = [];
        })
        .finally(() => {
          this.gettingLocation = false;
        });
    },

    // 搜索位置
    searchLocation() {
      if (this.locationSearchQuery) {
        const query = this.locationSearchQuery.toLowerCase();
        // 添加搜索动画效果
        this.filteredLocations = [];
        this.locationError = false; // 清除错误状态

        // 如果有当前位置坐标，使用地图工具函数搜索位置
        if (this.currentLocation && this.currentLocation.latitude) {
          const { latitude, longitude } = this.currentLocation;

          // 显示加载中状态
          this.gettingLocation = true;

          // 延迟一下搜索，给用户更好的视觉反馈
          setTimeout(() => {
            mapSearchLocation(query, latitude, longitude, 5000, 10)
              .then(data => {
                // 处理返回的位置数据
                this.filteredLocations = data.map(item => {
                  // 计算大致距离
                  const distance = calculateDistance(latitude, longitude,
                    item.location.lat, item.location.lng);

                  return {
                    name: item.title,
                    address: item.address,
                    distance: formatDistance(distance),
                    location: item.location
                  };
                });
              })
              .catch(error => {
                // 网络请求失败，显示错误提示
                console.error('搜索位置失败:', error);
                this.locationError = true;
                this.locationErrorMessage = '搜索失败，请检查网络连接并重试';
                this.filteredLocations = [];
              })
              .finally(() => {
                this.gettingLocation = false;
              });
          }, 300);
        } else {
          // 如果没有当前位置，显示错误状态
          this.locationError = true;
          this.locationErrorMessage = '无法获取当前位置，请尝试重新开启定位权限';
          this.filteredLocations = [];
        }
      } else {
        this.locationError = false; // 清除错误状态
        this.filteredLocations = [...this.nearbyLocations];
      }
    },

    // 选择位置
    selectLocation(location, index) {
      this.selectedLocationIndex = index;
      this.selectedLocation = {
        name: location.name,
        address: location.address
        // 不再保存经纬度信息，统一使用当前位置的经纬度
      };
    },

    // 提示消息
    showToast(title, icon = 'none') {
      uni.showToast({
        title: title,
        icon: icon,
        duration: 2000
      });
    },

    async publishPost() {
      // 检查是否正在提交，避免重复提交
      if (this.isSubmitting) return;

      // 检查文本内容是否为空
      if (!this.postContent.trim()) {
        uni.showToast({
          title: '请输入动态内容',
          icon: 'none'
        });
        return;
      }

      // 检查是否有图片正在上传
      if (this.hasUploadingImages) {
        uni.showToast({
          title: '图片上传中，请稍候再试',
          icon: 'none'
        });
        return;
      }

      // 检查所有图片是否已上传成功（使用服务器URL）
      const hasLocalImages = this.images.some(img => {
        const imgUrl = img.url || img;
        return typeof imgUrl === 'string' && !imgUrl.startsWith('http');
      });

      if (hasLocalImages) {
        uni.showToast({
          title: '图片上传中，请稍候再试',
          icon: 'none'
        });
        return;
      }

      this.isSubmitting = true;
      this.publishing = true;
      this.publishingMessage = '正在发布...';

      let locationName = '';
      let locationLng = null;
      let locationLat = null;

      // 如果开启了位置功能
      if (this.showLocation) {
        // 总是使用当前位置的经纬度
        if (this.currentLocation) {
          locationLng = this.currentLocation.longitude;
          locationLat = this.currentLocation.latitude;
        }

        // 如果用户选择了具体位置，使用选择的位置名称
        if (this.selectedLocation) {
          locationName = this.selectedLocation.name;
        }
        // 如果未选择具体位置但有获取到城市信息，使用当前城市
        else if (this.nearbyLocations.length > 0 && this.nearbyLocations[0].isCity) {
          locationName = this.nearbyLocations[0].name;
        }
      }

      // 构建请求参数
      const postData = {
        content: this.postContent,
        type: this.determinePostType(), // 根据是否有图片等确定类型
        medias: this.images.map(img => ({
          url: img.url || img,
          type: 1, // 1表示图片，可根据实际情况修改
          thumbUrl: img.thumbUrl || '',
          width: img.width || 0,
          height: img.height || 0,
          size: img.size || 0,
          sort: img.sort || 0
        })),
        topicIds: this.getTopicIds(), // 获取已存在的话题ID
        topicNames: this.getCustomTopicNames(), // 获取需要创建的自定义话题
        visibility: 1, // 1表示公开
        isAnonymous: false,
        location: locationName,
        longitude: locationLng,
        latitude: locationLat
      };

      // 调用后端API发布动态
      createPost(postData)
        .then(res => {
          this.publishingMessage = '发布成功!';

          // 保存新发布的动态到Vuex
          const newPost = {
            id: res, // 使用返回的ID或临时ID
            userId: this.$store.state.user.userInfo?.id,
            username: this.$store.state.user.userInfo?.nickname || '用户',
            avatar: this.$store.state.user.userInfo?.avatar || '',
            gender: this.$store.state.user.userInfo?.gender || 'male',
            age: this.$store.state.user.userInfo?.age || 25,
            isVerified: this.$store.state.user.userInfo?.isVerified || false,
            isVip: this.$store.state.user.userInfo?.isVip || false,
            time: '刚刚',
            location: locationName,
            topics: this.selectedTopics.map(topic => topic.name),
            content: this.postContent,
            images: this.images.map(img => ({
              url: img.url || img,
              thumbUrl: img.thumbUrl || '',
              alt: '动态图片',
              needUnlock: false,
              unlocked: true,
              isPortrait: img.height > img.width,
              width: img.width || 0,
              height: img.height || 0
            })),
            commentCount: 0,
            likeCount: 0,
            isLiked: false
          };

          // 保存到Vuex
          this.$store.dispatch('saveNewPost', newPost);

		  // 通过Vuex刷新用户信息
		  this.$store.dispatch('user/getUserInfo');

          // #ifdef MP-WEIXIN
          // 检查是否已订阅
          if (!SubscribeManager.isSubscribed(STORAGE_KEYS.POST.SUBSCRIBED)) {
            // 未订阅用户，检查是否需要显示提示
            if (SubscribeManager.shouldShowPrompt(STORAGE_KEYS.POST.SUBSCRIBED, STORAGE_KEYS.POST.LAST_PROMPT, 'POST')) {
              // 记录提示时间
              SubscribeManager.recordPromptTime(STORAGE_KEYS.POST.LAST_PROMPT);
              // 显示订阅弹窗
              this.showSubscribe = true;
              this.publishing = false;
              this.isSubmitting = false;
            } else {
              // 不需要显示提示，直接进行页面跳转
              setTimeout(() => {
                this.publishing = false;
                this.isSubmitting = false;
                setTimeout(() => {
                  uni.navigateBack();
                }, 1000);
              }, 800);
            }
          } else {
            // 设置发布状态为完成
            this.publishing = false;
            this.isSubmitting = false;
            // 已订阅用户，执行静默订阅续期，并在回调中处理跳转
            SubscribeManager.silentSubscribe(
              'POST_ALL',
              STORAGE_KEYS.POST.SUBSCRIBED,
              STORAGE_KEYS.POST.SUBSCRIBE_TIME,
              STORAGE_KEYS.POST.LAST_PROMPT,
              (result) => {

                // 只有订阅成功接受的情况下才执行跳转
                if (result && result.accepted) {
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 1000);
                } else if (result && result.rejected) {
                  // 用户拒绝了订阅，引导用户去设置页面开启权限（已在封装里面处理）
                } else {
                  // 其他情况，延迟较短时间后跳转
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 1000);
                }
              }
            );
          }
          // #endif

          // #ifndef MP-WEIXIN
          // 对于非微信环境，直接返回首页
          setTimeout(() => {
            this.publishing = false;
            this.isSubmitting = false; // 重置提交状态
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }, 800);
          // #endif
        })
        .catch(error => {
          this.publishing = false;
          this.isSubmitting = false; // 重置提交状态
          console.error('发布动态失败', error);

		  if(error.code === 1004001200){
        // 显示解锁弹窗，不再直接显示VIP弹窗
        // this.showUnlockPostModal = true;
		  	// 不再显示解锁弹窗，直接显示会员提示
        uni.showModal({
          title: '会员特权',
          content: error.msg,
          showCancel: false,
          success: (res) => {
            if (res.confirm) {
              // 显示VIP弹窗
              this.isVipModalVisible = true;
            }
          }
        });
		  }else{
		  	uni.showToast({
		  	  title: error.msg,
		  	  icon: 'none',
		  	  duration: 2000
		  	});
		  }
        });
    },

    // 处理解锁发布动态成功事件
    onPostUnlockSuccess() {
      // 关闭解锁弹窗
      this.showUnlockPostModal = false;

      // 提示用户解锁成功
      uni.showToast({
        title: '解锁成功，请重新发布',
        icon: 'none',
        duration: 2000
      });
    },

    // 确定动态类型
    determinePostType() {
      if (this.images && this.images.length > 0) {
        return 2; // 图文类型
      }
      return 1; // 纯文本类型
    },

    // 获取话题ID列表
    getTopicIds() {
      // 筛选出后端已有的话题ID列表
      return this.selectedTopics
        .filter(topic => topic.isFromBackend && topic.id)
        .map(topic => topic.id);
    },

    // 获取自定义话题名称列表
    getCustomTopicNames() {
      // 返回用户创建的新话题名称列表
      return this.selectedTopics
        .filter(topic => !topic.isFromBackend)
        .map(topic => topic.name);
    },

    // 输入框聚焦
    onLocationInputFocus() {
      this.inputFocused = true;
    },

    // 输入框失焦
    onLocationInputBlur() {
      this.inputFocused = false;
    },

    // 话题输入框聚焦
    onTopicInputFocus() {
      this.topicInputFocused = true;
    },

    // 话题输入框失焦
    onTopicInputBlur() {
      this.topicInputFocused = false;
    },

    // 触摸开始
    touchStart(event, index) {
      if (this.images.length <= 1) return; // 只有一张图片或没有图片时不启用拖拽

      // 获取触摸点位置
      const touch = event.touches[0];
      this.startPageX = touch.pageX;
      this.startPageY = touch.pageY;
      this.currentX = touch.pageX;
      this.currentY = touch.pageY;

      // 记录当前拖拽项的索引
      this.dragIndex = index;

      // 获取元素大小和位置
      const query = uni.createSelectorQuery();
      query.selectAll('.image-preview-item').boundingClientRect(rects => {
        this.itemPositions = rects.map(rect => ({
          left: rect.left,
          top: rect.top,
          width: rect.width,
          height: rect.height,
          index: parseInt(rect.dataset.index)
        }));

        // 记录单个项的尺寸
        if (rects.length > 0) {
          this.itemWidth = rects[0].width;
          this.itemHeight = rects[0].height;
        }
      }).exec();

      // 延迟一点时间显示拖拽状态，避免用户点击时就立即显示
      setTimeout(() => {
        if (this.dragIndex === index) {
          this.isDragging = true;

          // 添加震动反馈效果
          // #ifdef APP-PLUS || MP-WEIXIN
          uni.vibrateShort({
            success: () => {
              console.log('vibrate success');
            }
          });
          // #endif
        }
      }, 150);
    },

    // 触摸移动
    touchMove(event) {
      if (!this.isDragging || this.dragIndex === -1) return;

      const touch = event.touches[0];
      this.currentX = touch.pageX;
      this.currentY = touch.pageY;

      // 计算当前位置位于哪个图片项上
      const targetIndex = this.getTargetIndexFromPosition(this.currentX, this.currentY);

      // 如果找到有效的目标索引，且与当前拖拽索引不同，交换位置
      if (targetIndex !== -1 && targetIndex !== this.dragIndex) {
        this.swapImages(this.dragIndex, targetIndex);
        this.dragIndex = targetIndex;

        // 重新计算位置信息
        setTimeout(() => {
          const query = uni.createSelectorQuery();
          query.selectAll('.image-preview-item').boundingClientRect(rects => {
            this.itemPositions = rects.map(rect => ({
              left: rect.left,
              top: rect.top,
              width: rect.width,
              height: rect.height,
              index: parseInt(rect.dataset.index)
            }));
          }).exec();
        }, 50);
      }
    },

    // 触摸结束
    touchEnd() {
      this.isDragging = false;
      this.dragIndex = -1;
    },

    // 根据位置获取目标索引
    getTargetIndexFromPosition(x, y) {
      for (let i = 0; i < this.itemPositions.length; i++) {
        const pos = this.itemPositions[i];
        if (
          x >= pos.left &&
          x <= pos.left + pos.width &&
          y >= pos.top &&
          y <= pos.top + pos.height
        ) {
          return pos.index;
        }
      }
      return -1;
    },

    // 交换图片位置
    swapImages(fromIndex, toIndex) {
      // 创建新数组以保持响应性
      const newImages = [...this.images];
      const temp = newImages[fromIndex];
      newImages[fromIndex] = newImages[toIndex];
      newImages[toIndex] = temp;
      this.images = newImages;

      // 添加震动反馈
      // #ifdef APP-PLUS || MP-WEIXIN
      uni.vibrateShort();
      // #endif
    },

    // 添加回 useDefaultLocations 方法，但修改其功能
    useDefaultLocations() {
      // 不再添加默认位置
      this.nearbyLocations = [];
      this.filteredLocations = [];
      // 使用错误状态显示
      this.locationError = true;
      this.locationErrorMessage = '无法获取位置信息，请稍后重试或手动输入位置';
    },

    // 获取话题列表
    fetchTopics() {
      // 调用API获取话题列表
      getTopicList({ pageSize: 100 }) // 增加获取的话题数量
        .then(res => {
          if (res && Array.isArray(res)) {
            // 更新话题列表
            this.topicsFromBackend = res.map(item => ({
              id: item.id,
              name: item.name,
              categoryId: item.categoryId,
              hot: item.postCount || 0 // 热度
            }));

            // 按热度排序
            this.topicsFromBackend.sort((a, b) => b.hot - a.hot);

            console.log('成功获取话题列表:', this.topicsFromBackend.length);
          } else {
            console.warn('获取话题列表格式不符合预期');
            this.useDefaultTopics();
          }
        })
        .catch(err => {
          console.error('获取话题列表失败:', err);
          this.useDefaultTopics();
        })
        .finally(() => {

        });
    },

    // 搜索话题
    searchTopic(keyword) {
      if(!keyword || keyword.trim() === '') {
        // 如果关键词为空，则重新获取全部话题
        this.fetchTopics();
        return;
      }

      // 显示加载指示器
      uni.showLoading({
        title: '搜索中...',
        mask: false
      });

      // 调用与fetchTopics相同的API接口，但增加keyword参数
      getTopicList({
        pageSize: 100,
        keyword: keyword.trim()
      })
        .then(res => {
          if (res && Array.isArray(res)) {
            // 更新话题列表
            this.topicsFromBackend = res.map(item => ({
              id: item.id,
              name: item.name,
              categoryId: item.categoryId,
              hot: item.postCount || 0 // 热度
            }));

            // 按热度排序
            this.topicsFromBackend.sort((a, b) => b.hot - a.hot);

            console.log('话题搜索结果:', this.topicsFromBackend.length);
          } else {
            console.warn('话题搜索返回格式不符合预期');
          }
        })
        .catch(err => {
          console.error('搜索话题失败:', err);
          // 搜索失败时，可以选择保留现有话题或者清空
        })
        .finally(() => {
          uni.hideLoading();
        });
    },

    // 使用默认话题（当API请求失败时）
    useDefaultTopics() {
      console.log('使用默认话题数据');
      this.topicsFromBackend = [
        { id: 1, name: '电竞' },
        { id: 2, name: '游戏' },
        { id: 3, name: '社交' },
        { id: 4, name: '英雄联盟' },
        { id: 5, name: '王者荣耀' },
        { id: 6, name: '健身' },
        { id: 7, name: '摄影' },
        { id: 8, name: '电影' }
      ];
    },

    // 格式化热度数字
    formatHot(hot) {
      if (hot >= 10000) {
        return (hot / 10000).toFixed(1) + 'w';
      } else if (hot >= 1000) {
        return (hot / 1000).toFixed(1) + 'k';
      }
      return hot;
    },

    // 防抖搜索
    debounceSearch(e) {
      // 清除之前的定时器
      if (this.topicSearchTimer) {
        clearTimeout(this.topicSearchTimer);
      }

      // 设置新的定时器
      this.topicSearchTimer = setTimeout(() => {
        this.searchTopic(e.detail.value);
      }, 500); // 500毫秒延迟
    },

    // 初始化话题搜索配置
    initTopicSearchConfig() {
      // 尝试从本地存储中获取设置
      try {
        const savedConfig = uni.getStorageSync('enableTopicSearchAndCreate');
        if (savedConfig !== '') {
          this.enableTopicSearchAndCreate = savedConfig === 'true';
        } else {
          // 如果没有本地设置，可以从全局配置或默认值初始化
          // 这里可以根据需要修改默认值或从其他地方获取配置
          this.enableTopicSearchAndCreate = false;
        }
      } catch (e) {
        console.error('获取话题搜索配置失败:', e);
        this.enableTopicSearchAndCreate = false;
      }
    },

    // 保存话题搜索配置
    saveTopicSearchConfig(value) {
      this.enableTopicSearchAndCreate = value;
      // 保存到本地存储
      try {
        uni.setStorageSync('enableTopicSearchAndCreate', value.toString());
      } catch (e) {
        console.error('保存话题搜索配置失败:', e);
      }
    },

    // 切换开关
    toggleSwitch() {
      this.showLocation = !this.showLocation;
      this.toggleLocation();

      // 添加触觉反馈
      // #ifdef APP-PLUS || MP-WEIXIN
      uni.vibrateShort({
        success: () => {
          console.log('vibrate success');
        }
      });
      // #endif
    },

    onSubscribeComplete() {
      // 更新状态
      SubscribeManager.silentSubscribe(
        'POST_ALL',
        STORAGE_KEYS.POST.SUBSCRIBED,
        STORAGE_KEYS.POST.SUBSCRIBE_TIME,
        STORAGE_KEYS.POST.LAST_PROMPT,
        (result) => {
          // 关闭弹窗
          this.showSubscribe = false;

          if (result && result.accepted) {
            // 订阅成功，返回首页
            this.publishing = false;
            this.isSubmitting = false;
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          } else if (result && result.rejected) {
            // 用户拒绝了订阅，引导用户去设置页面开启权限（已在封装里面处理）
          } else {
            // 其他情况，完成订阅流程后返回
            this.publishing = false;
            this.isSubmitting = false;
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        }
      );
    },

    // 显示toast提示
    showToast(title, icon = 'none') {
      uni.showToast({
        title: title,
        icon: icon,
        duration: 2000
      });
    },

    // 添加继续引导订阅的方法
    continueSubscribeGuide() {
      SubscribeManager.showSubscribeGuide((subscribed) => {
        // 如果仍未订阅，onShow会再次触发处理
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.post-create-container {
  padding: 30rpx;
  padding-bottom: 150rpx;
  background-color: #020303;
  min-height: 100vh;
  position: relative;
  animation: fadeIn 0.4s;
  box-sizing: border-box;
}

/* 输入区域 */
.input-section {
  margin-bottom: 30rpx;
  position: relative;
}

.content-input {
  width: 100%;
  min-height: 200rpx;
  background-color: #070707;
  border: 1px solid rgba(179, 247, 60, 0.1);
  color: #f0f0f0;
  font-size: 30rpx;
  line-height: 1.5;
  outline: none;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.content-input:focus {
  border-color: rgba(179, 247, 60, 0.3);
  box-shadow: 0 0 0 2px rgba(179, 247, 60, 0.1);
}

.content-counter {
  text-align: right;
  font-size: 24rpx;
  color: #999999;
  transition: color 0.3s;
}

.content-counter.near-limit {
  color: #ff9800;
}

.content-counter.at-limit {
  color: #f44336;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* 图片预览区域 */
.image-preview-section {
  margin-bottom: 40rpx;
  position: relative;
}

.image-preview-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding: 0 10rpx;
}

.image-preview-title .title-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #B3F73C;
}

.image-preview-title .drag-hint {
  font-size: 24rpx;
  color: #999999;
  display: flex;
  align-items: center;
  animation: fadeInRight 0.5s;
}

.drag-hint .tn-icon-move {
  margin-right: 6rpx;
  font-size: 26rpx;
  animation: wiggle 2s infinite;
}

@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2rpx); }
  75% { transform: translateX(2rpx); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20rpx); }
  to { opacity: 1; transform: translateX(0); }
}

.image-preview-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -10rpx;
  position: relative;
}

.image-preview-grid.dragging {
  cursor: grabbing;
}

.image-preview-item {
  position: relative;
  width: calc(33.33% - 20rpx);
  margin: 10rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #070707;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.2);
  transform: scale(1);
  transition: transform 0.2s, box-shadow 0.2s, z-index 0s;
  z-index: 1;
  touch-action: none;
}

.image-preview-item.is-dragging {
  z-index: 10;
  transform: scale(1.05);
  box-shadow: 0 10rpx 25rpx rgba(0,0,0,0.3);
  transition: transform 0.2s, box-shadow 0.2s, z-index 0s;
  opacity: 0.85;
}

.image-preview-item:active {
  transform: scale(0.97);
}

.image-preview-item.is-dragging:active {
  transform: scale(1.05);
}

.image-preview-item::before {
  content: "";
  display: block;
  padding-top: 100%; /* 1:1 宽高比 */
}

.image-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-image {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 40rpx;
  height: 40rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  color: white;
  transform: scale(1);
  transition: transform 0.2s, background-color 0.2s;
}

.remove-image:active {
  transform: scale(1.15);
  background-color: rgba(244, 67, 54, 0.8);
}

/* 拖动指示器 */
.drag-indicator {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  width: 40rpx;
  height: 40rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  color: #B3F73C;
  transform: scale(0);
  transition: transform 0.2s;
  opacity: 0.7;
}

.image-preview-item:active .drag-indicator,
.image-preview-item.is-dragging .drag-indicator {
  transform: scale(1);
}

.location-search-input {
  flex: 1;
}

.topic-input {
  flex: 1;
}

.image-upload {
  position: relative;
  width: calc(33.33% - 20rpx);
  margin: 10rpx;
  border-radius: 16rpx;
  background-color: #070707;
  border: 1rpx dashed rgba(179, 247, 60, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s;
}

.image-upload:active {
  transform: scale(0.97);
  background-color: rgba(179, 247, 60, 0.05);
}

.image-upload::before {
  content: "";
  display: block;
  padding-top: 100%; /* 1:1 宽高比 */
}

.upload-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #B3F73C;
}

.upload-icon text:first-child {
  font-size: 40rpx;
  margin-bottom: 8rpx;
  transition: transform 0.3s;
}

.image-upload:active .upload-icon text:first-child {
  transform: rotate(90deg);
}

.upload-text {
  font-size: 24rpx;
  margin-top: 10rpx;
}

/* 上传进度条 */
.upload-progress-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6rpx;
  background-color: rgba(0,0,0,0.3);
  overflow: hidden;
}

.upload-progress-bar {
  height: 100%;
  background-color: #B3F73C;
  width: 0%;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.upload-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0) 100%
  );
  width: 50%;
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(200%);
  }
}

/* 拖动排序动画 */
@keyframes dragAnim {
  0% { transform: rotate(-1deg) scale(1.02); }
  50% { transform: rotate(1deg) scale(1.02); }
  100% { transform: rotate(-1deg) scale(1.02); }
}

/* 话题选择区域 */
.topics-section {
  background-color: #070707;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  border: 1px solid rgba(179, 247, 60, 0.1);
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.3);
  transition: transform 0.3s, box-shadow 0.3s;

  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .topic-advanced-toggle {
      margin-left: auto;
      display: flex;
      align-items: center;

      .toggle-label {
        font-size: 24rpx;
        color: #999999;
        margin-right: 10rpx;
        transition: color 0.3s;
      }

      .custom-switch {
        transform: scale(0.8);
        transition: all 0.3s ease;
      }
    }
  }
}

.topics-section:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #B3F73C;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease, color 0.3s ease;
}

.section-title text:first-child {
  margin-right: 10rpx;
  font-size: 32rpx;
  transition: transform 0.4s ease;
}

.location-section.active .section-title {
  transform: translateX(4rpx);
  color: #B3F73C;
  text-shadow: 0 0 10rpx rgba(179, 247, 60, 0.2);
}

.location-section.active .section-title text:first-child {
  transform: scale(1.1);
}

.selected-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.topic-chip {
  padding: 12rpx 24rpx;
  background-color: rgba(179, 247, 60, 0.1);
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #B3F73C;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  margin-right: 16rpx;
}

.topic-chip::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(179, 247, 60, 0) 0%,
    rgba(179, 247, 60, 0.15) 50%,
    rgba(179, 247, 60, 0) 100%
  );
  width: 50%;
  transform: translateX(-100%);
  pointer-events: none;
}

.topic-chip.selected {
  background-color: rgba(179, 247, 60, 0.2);
  box-shadow: 0 2rpx 8rpx rgba(179, 247, 60, 0.2);
}

.topic-chip.selected::after {
  animation: topicShimmer 2s infinite;
}

@keyframes topicShimmer {
  100% {
    transform: translateX(200%);
  }
}

.topic-chip:active {
  transform: scale(0.96);
}

.topic-chip text {
  margin-left: 10rpx;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.topic-chip:active text {
  opacity: 1;
}

.topics-scroll-wrapper {
  position: relative;
  margin-top: 20rpx;
  overflow: hidden;
  border-radius: 30rpx;
  height: 60rpx;
}

/* 简化模式下的话题滚动区域 */
.topics-scroll-wrapper--simple {
  padding-left: 0;
}

.create-topic-btn {
  position: absolute;
  left: 0;
  top: 0;
  height: 60rpx;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 18rpx;
  background-color: rgba(179, 247, 60, 0.15);
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #B3F73C;
  font-weight: 500;
  transition: all 0.3s;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
  min-width: 170rpx;
}

.create-topic-btn:active {
  transform: scale(0.96);
  background-color: rgba(179, 247, 60, 0.25);
}

.create-topic-btn text:first-child {
  margin-right: 6rpx;
  transition: transform 0.3s;
}

.create-topic-btn:active text:first-child {
  transform: rotate(90deg);
}

.scrollable-topics {
  display: flex;
  white-space: nowrap;
  height: 60rpx;
  padding-left: 190rpx;
  position: relative;
  transition: padding-left 0.3s ease-out;
}

/* 简化模式下的滚动区样式 */
.scrollable-topics--simple {
  padding-left: 0;
}

.scrollable-topics::before {
  content: '';
  position: absolute;
  left: 180rpx;
  top: 0;
  height: 100%;
  width: 30rpx;
  background: linear-gradient(to left, rgba(7, 7, 7, 0), #070707);
  pointer-events: none;
  z-index: 2;
}

/* 简化模式下不显示左侧渐变 */
.topics-scroll-wrapper--simple .scrollable-topics::before {
  display: none;
}

.scrollable-topics::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 80rpx;
  background: linear-gradient(to right, rgba(7, 7, 7, 0), #070707);
  pointer-events: none;
}

/* 位置信息区域 */
.location-section {
  background-color: #070707;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  border: 1px solid rgba(179, 247, 60, 0.1);
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.location-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(179, 247, 60, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.location-section.active {
  background-color: rgba(7, 7, 7, 0.95);
  border-color: rgba(179, 247, 60, 0.25);
  box-shadow: 0 4rpx 20rpx rgba(179, 247, 60, 0.15);
  transform: translateY(-2rpx);
}

.location-section.active::before {
  opacity: 1;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: 5rpx 0;
  transition: all 0.3s ease;
}

.location-section.active .section-header {
  border-bottom-color: rgba(179, 247, 60, 0.15);
  padding-bottom: 15rpx;
  margin-bottom: 10rpx;
}

.location-options {
  margin-top: 20rpx;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease;
  opacity: 0;
  transform: translateY(-10rpx);
}

.location-section.active .location-options {
  max-height: 800rpx;
  transition: max-height 0.5s ease-in-out, opacity 0.3s ease, transform 0.4s ease;
  opacity: 1;
  transform: translateY(0);
}

.location-search {
  margin-bottom: 20rpx;
  animation: fadeInUp 0.4s ease;
  position: relative;
  width: 100%;
}

.search-wrapper {
  position: relative;
  border-radius: 36rpx;
  overflow: hidden;
  border: 1px solid rgba(179, 247, 60, 0.2);
  background-color: rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  padding: 0 20rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
}

.search-wrapper:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(179, 247, 60, 0.05) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  pointer-events: none;
  z-index: 1;
  border-radius: 36rpx;
}

/* 输入框聚焦时的样式 */
.search-wrapper--focused {
  border-color: rgba(179, 247, 60, 0.4) !important;
  box-shadow: 0 0 16rpx rgba(179, 247, 60, 0.15) !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
}

/* 搜索指示动画容器 */
.search-indicator-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3rpx;
  background-color: rgba(179, 247, 60, 0.1);
  overflow: hidden;
}

/* 搜索指示动画 */
.search-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  background-color: #B3F73C;
  width: 0;
  animation: searchIndicator 2s infinite;
  z-index: 2;
  box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.6);
}

@keyframes searchIndicator {
  0% { width: 0; left: 0; }
  50% { width: 100%; left: 0; }
  51% { width: 100%; left: auto; right: 0; }
  100% { width: 0; left: auto; right: 0; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.location-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
  color: #B3F73C;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  opacity: 0.8;
  animation: breathing 1.5s infinite;
}

@keyframes breathing {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.location-list {
  margin-top: 20rpx;
  position: relative;
}

.location-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  border: 1rpx solid transparent;
  transition: all 0.3s ease;
  transform: translateY(0);
  animation: locationItemFadeIn 0.5s ease forwards;
  opacity: 0;
  transform: translateY(10rpx);
  position: relative;
}

/* 添加城市选项的特殊样式 */
.location-item[data-is-city="true"] {
  background-color: rgba(179, 247, 60, 0.05);
  border: 1rpx dashed rgba(179, 247, 60, 0.2);
}

.location-item[data-is-city="true"] .location-icon {
  background-color: rgba(179, 247, 60, 0.15);
}

.location-item[data-is-city="true"] .location-name {
  font-weight: 500;
}

@keyframes locationItemFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.location-item.active {
  background-color: rgba(179, 247, 60, 0.1);
  border: 1rpx solid rgba(179, 247, 60, 0.3);
  box-shadow: 0 4rpx 16rpx rgba(179, 247, 60, 0.1);
}

.location-item:active {
  transform: scale(0.98) translateY(2rpx);
}

.location-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: rgba(179, 247, 60, 0.1);
  color: #B3F73C;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  transition: all 0.3s;
}

.location-item.active .location-icon {
  transform: scale(1.1);
  background-color: rgba(179, 247, 60, 0.2);
}

.location-info {
  flex: 1;
}

.location-name {
  font-size: 28rpx;
  margin-bottom: 6rpx;
  color: #f0f0f0;
  transition: color 0.3s;
}

.location-item.active .location-name {
  color: #B3F73C;
}

.location-address {
  font-size: 24rpx;
  color: #999;
}

.location-distance {
  font-size: 24rpx;
  color: #B3F73C;
  background-color: rgba(179, 247, 60, 0.1);
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  margin-left: 16rpx;
  transition: all 0.3s;
}

.location-item.active .location-distance {
  background-color: rgba(179, 247, 60, 0.2);
}

.no-location-results {
  padding: 40rpx 0;
}

.no-results-desc {
  font-size: 26rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
  text-align: center;
}

/* 底部操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(2, 3, 3, 0.95);
  backdrop-filter: blur(20rpx);
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.3);
  z-index: 100;
  border-top: 1px solid rgba(179, 247, 60, 0.05);
  transform: translateY(0);
  transition: transform 0.3s;
}

/* 自定义发布按钮 */
.custom-publish-button {
  position: relative;
  overflow: hidden;
  border-radius: 20rpx;
  background-color: #B3F73C;
  height: 80rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.custom-publish-button:active {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(179, 247, 60, 0.3);
}

.button-content {
  font-size: 32rpx;
  color: #020303;
  font-weight: 500;
  z-index: 2;
  display: flex;
  align-items: center;
}

.remain-count {
  font-size: 24rpx;
  font-weight: normal;
  margin-left: 10rpx;
  opacity: 0.8;
}

.button-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0) 100%
  );
  width: 30%;
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 1;
}

.custom-publish-button:not(.disabled) .button-shine {
  animation: buttonShine 2.5s infinite;
}

@keyframes buttonShine {
  100% {
    transform: translateX(500%);
  }
}

/* 自定义发布按钮 - 禁用状态 */
.custom-publish-button.disabled {
  background-color: rgba(179, 247, 60, 0.5);
  box-shadow: none;
  opacity: 0.7;
  pointer-events: none;
}

.custom-publish-button.disabled .button-content {
  color: rgba(2, 3, 3, 0.5);
}

/* 话题搜索框 */
.topic-search-wrapper {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  animation: fadeInDown 0.3s ease-out;
  transform-origin: top center;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10rpx) scaleY(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* 热度标签 */
.topic-hot {
  font-size: 20rpx;
  color: #fff;
  background-color: rgba(179, 247, 60, 0.5);
  border-radius: 10rpx;
  padding: 0 8rpx;
  margin-left: 8rpx;
  opacity: 0.8;
}

/* 话题结束提示 */
.topic-end-hint {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20rpx;
  color: #999;
  font-size: 24rpx;
  margin-left: 190rpx;
  height: 60rpx;
  line-height: 60rpx;
}

.refresh-link {
  color: #B3F73C;
  margin-left: 10rpx;
  text-decoration: underline;
}

/* 位置信息区域的自定义样式 */
.custom-switch {
  transform: scale(1.05);
  box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
  margin-left: 10rpx;
  padding: 5rpx;
  border-radius: 50rpx;
  background-color: rgba(0, 0, 0, 0.1);
}

/* 新开关样式 */
.custom-toggle {
  position: relative;
  width: 80rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-track {
  position: relative;
  width: 80rpx;
  height: 36rpx;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 40rpx;
  transition: all 0.3s ease;
  box-shadow: inset 0 1rpx 5rpx rgba(0, 0, 0, 0.2);
}

.toggle-track.active {
  background-color: rgba(179, 247, 60, 0.3);
  box-shadow: inset 0 1rpx 5rpx rgba(179, 247, 60, 0.2);
}

.toggle-thumb {
  position: absolute;
  left: 2rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 26rpx;
  height: 26rpx;
  background-color: #666;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.toggle-thumb.active {
  background-color: #B3F73C;
  transform: translate(50rpx, -50%);
  box-shadow: 0 2rpx 10rpx rgba(179, 247, 60, 0.4);
}

.custom-toggle:active .toggle-thumb {
  transform: scale(0.9) translateY(-50%);
}

.custom-toggle:active .toggle-thumb.active {
  transform: translate(50rpx, -50%) scale(0.9);
}

/* 开关状态指示器 */
.switch-status {
  font-size: 22rpx;
  color: #B3F73C;
  margin-left: 12rpx;
  padding: 2rpx 10rpx;
  background-color: rgba(179, 247, 60, 0.1);
  border-radius: 10rpx;
  opacity: 0;
  transform: translateX(-10rpx);
  transition: all 0.3s ease;
}

.location-section.active .switch-status {
  opacity: 1;
  transform: translateX(0);
}

/* 创建话题弹窗 */
.create-topic-popup {
  width: 600rpx;
  background-color: #020303;
  border-radius: 20rpx;
  overflow: hidden;
  border: 1px solid rgba(179, 247, 60, 0.1);
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.4);
  animation: popupFadeIn 0.3s;
}

@keyframes popupFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.popup-header {
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid rgba(179, 247, 60, 0.1);
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #f0f0f0;
}

.popup-content {
  padding: 30rpx;
}

.input-field {
  margin-bottom: 20rpx;
}

.input-label {
  display: block;
  margin-bottom: 16rpx;
  font-size: 28rpx;
  color: #B3F73C;
  font-weight: 500;
}

.input-wrapper {
  position: relative;
  height: 70rpx;
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  border: 1rpx solid rgba(179, 247, 60, 0.2);
  border-radius: 16rpx;
  background-color: #070707;
  padding: 0 10rpx;
  overflow: hidden;
  padding-right: 80rpx;
}

/* 新增聚焦时的输入框包装容器样式 */
.input-wrapper--focused {
  box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.2);
}

.input-wrapper--focused .tn-input {
  border-color: rgba(179, 247, 60, 0.4) !important;
}

.input-counter {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24rpx;
  color: #999;
  transition: color 0.3s;
  z-index: 10;
  line-height: 1;
}

.input-counter.near-limit {
  color: #ff9800;
}

.input-counter.at-limit {
  color: #f44336;
  animation: pulse 1s infinite;
}

.input-tip {
  font-size: 24rpx;
  color: #999;
  line-height: 1.4;
  margin-top: 16rpx;
}

.popup-footer {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-around;
  border-top: 1rpx solid rgba(179, 247, 60, 0.1);
}

.popup-footer button {
  transition: all 0.3s;
}

.popup-footer button:active {
  transform: scale(0.96);
}

/* 发布中弹窗 */
.publishing-popup {
  width: 400rpx;
  height: 240rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: popupFadeIn 0.3s;
}

.publishing-text {
  margin-top: 30rpx;
  font-size: 30rpx;
  color: #f0f0f0;
  text-align: center;
}

.publishing-subtext {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #999;
  animation: breathing 1.5s infinite;
}

/* 添加页面进入动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

/* 添加位置错误状态相关的样式 */
.location-error {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeInUp 0.4s ease;
}

.error-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: rgba(179, 247, 60, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.error-icon text {
  font-size: 40rpx;
  color: #B3F73C;
}

.error-message {
  font-size: 28rpx;
  color: #f0f0f0;
  text-align: center;
  margin-bottom: 30rpx;
  line-height: 1.5;
}

.error-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.retry-btn {
  padding: 12rpx 30rpx;
  background-color: rgba(179, 247, 60, 0.15);
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  color: #B3F73C;
  font-size: 26rpx;
  transition: all 0.3s;
}

.retry-btn:active {
  transform: scale(0.96);
  background-color: rgba(179, 247, 60, 0.25);
}

.retry-btn text:first-child {
  font-size: 28rpx;
}

.skip-btn {
  padding: 10rpx 30rpx;
  color: #999999;
  font-size: 24rpx;
  transition: all 0.3s;
}

.skip-btn:active {
  transform: scale(0.98);
  color: #f0f0f0;
}

/* 自定义发布按钮 - loading状态 */
.button-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  z-index: 2;
}

.loading-circle {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  border: 3rpx solid rgba(2, 3, 3, 0.8);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
  margin-right: 10rpx;
}

.button-loading text {
  font-size: 28rpx;
  color: #020303;
  font-weight: 500;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 简化模式下的话题提示 - 已移除 */
.simple-mode-hint {
  display: none; /* 隐藏此元素 */
}

/* 简化模式下的话题样式 */
.topic-chip--simple {
  margin-right: 20rpx;
  /* 调整简化模式下的话题样式，使其更美观 */
  background-color: rgba(179, 247, 60, 0.12);
}
</style>
